<script setup lang="ts">
// 导入子组件
import DepDialog from '~/components/Carteira/components/DepDialog.vue'
import SeconedDialog from './components/Seconed.vue'
import StartDialog from './components/StartDialog.vue'

/**
 * 抽奖状态枚举
 * 0 => 没有中奖
 * 1 => 中奖了，但是没有充值
 * 2 => 充值了还没领取奖
 */
enum LotteryState {
  NoLottery = 0,
  Lottery = 1,
  LotteryEnd = 2,
}

// 组件属性定义
const props = defineProps(['show'])
const emit = defineEmits(['close'])

// 对话框显示状态管理
const showStartDialog = ref(false)      // 开始对话框
const showSeconedDialog = ref(false)    // 第二步对话框
const showDepDialog = ref(false)        // 充值对话框
const showResultDialog = ref(false)     // 结果对话框

// 活动数据
const activityData = ref<any>({})

// 充值表单数据
const formData = reactive({ payNum: 0 })

/**
 * 初始化活动配置
 * 获取活动详情信息并设置充值条件
 */
function initConfig() {
  apo.activity.getActivityDetailInfo(38, (error: any, data: any) => {
    if (error) {
      apo.logger.error('getActivityDetailInfo error:', error)
      return
    }
    activityData.value = data
    formData.payNum = data.recharge_cond
  })
}

/**
 * 切换对话框显示状态
 * @param field - 要显示的对话框字段名，不传则关闭所有对话框
 */
function changeDialog(field?: any) {
  // 先关闭所有对话框
  showStartDialog.value = false
  showSeconedDialog.value = false
  showDepDialog.value = false
  showResultDialog.value = false

  if (!field) return

  // 根据字段名显示对应对话框
  switch (field) {
    case 'showStartDialog':
      showStartDialog.value = true
      break
    case 'showSeconedDialog':
      showSeconedDialog.value = true
      break
    case 'showDepDialog':
      showDepDialog.value = true
      break
    case 'showResultDialog':
      showResultDialog.value = true
      break
  }
}

/**
 * 监听主对话框显示状态变化
 * 当显示时初始化配置并显示开始对话框
 * 当隐藏时关闭所有子对话框
 */
watch(
  () => props.show,
  (newVal) => {
    if (!newVal) {
      changeDialog()
      return
    }
    changeDialog('showStartDialog')
    initConfig()
  },
)

/**
 * 开始下一步操作
 * 根据抽奖状态决定显示哪个对话框
 */
function startNext() {
  if (activityData.value.lottery_state === LotteryState.Lottery) {
    // 中奖但未充值，显示第二步对话框
    changeDialog('showSeconedDialog')
  } else if (activityData.value.lottery_state === LotteryState.LotteryEnd) {
    // 已充值未领奖，领取奖励后显示结果对话框
    apo.activity.claimActivityReward(38, (error: any) => {
      if (error) {
        apo.logger.error('claimActivityReward error:', error)
        return
      }
      changeDialog('showResultDialog')
    })
  }
}

// 路由监听：页面切换时关闭对话框
const route = useRoute()
watch(
  () => route.name,
  () => {
    emit('close')
  },
)
</script>

<template>
  <!-- 开始对话框：显示抽奖入口 -->
  <StartDialog :show="showStartDialog" :activityData="activityData" :LotteryState="LotteryState" @close="emit('close')"
    @initConfig="initConfig" @next="startNext" />

  <!-- 第二步对话框：中奖后引导充值 -->
  <SeconedDialog :show="showSeconedDialog" @close="emit('close')" @next="changeDialog('showDepDialog')" />

  <!-- 充值对话框：处理用户充值 -->
  <DepDialog :show="showDepDialog" :form-data="formData" @close="emit('close')" />

  <!-- 结果对话框：显示中奖结果 -->
  <CommonResultDialog :show="showResultDialog" :title="$t('activity.common.voce_venceu')"
    :desc="$t('activity.common.voce_venceu_desc')" :btn="$t('activity.common.confirmar')" :amount="activityData.reward"
    icon="/images/activity/common/Coin_Bg 1.png" @close="emit('close')" @sure="emit('close')" />
</template>

<style scoped lang="scss">
/* 抽奖对话框组件样式 */
/* 该组件主要负责管理多个子对话框的显示状态，本身不包含具体样式 */
</style>
